<template>
  <div>
    <el-form ref="formData" label-position="left" :model="formData" class="el-form">
      <el-form-item
        v-for="(item, index) in formDatalists
          .filter(i => i.sort)
          .sort((a, b) => {
            return a.sort - b.sort;
          })
          .slice(0, 4)"
        :key="index"
        :label="item.name + ':'"
        :prop="item.type === 'Select' ? item.selectValue : item.prop"
        class="w50p"
        :rules="rule(item)"
      >
        <el-input v-if="item.type === 'input'" v-model="formData[`${item.prop}`]" :placeholder="'请输入' + item.name" clearable />
        <el-select v-if="item.type === 'Select'" v-model="formData[item.selectValue]" filterable :placeholder="'请选择' + item.name" clearable>
          <el-option v-for="(items, indexs) in item.typeObj.list" :key="indexs" :label="items.name" :value="items.value" />
        </el-select>
      </el-form-item>
      <el-divider content-position="center" class="more">
        <span class="pointer" @click="formMore = !formMore">{{ formMore ? '收起' : '显示全部' }}</span>
      </el-divider>
      <template v-if="formMore">
        <el-form-item
          v-for="(item, index) in formDatalists
            .filter(i => i.sort)
            .sort((a, b) => {
              return a.sort - b.sort;
            })
            .slice(4)"
          :key="'form2' + index"
          :label="item.name + ':'"
          :prop="item.type === 'Select' ? item.selectValue : item.prop"
          class="w50p"
          :rules="rule(item)"
        >
          <el-input v-if="item.type === 'input'" v-model="formData[`${item.prop}`]" :placeholder="'请输入' + item.name" clearable />
          <el-select v-if="item.type === 'Select'" v-model="formData[item.selectValue]" filterable :placeholder="'请选择' + item.name" clearable>
            <el-option v-for="(items, indexs) in item.typeObj.list" :key="indexs" :label="items.name" :value="items.value" />
          </el-select>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import formData from '../formData.js';
export default {
  name: 'ExamineForm',
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formMore: false,
      formDatalists: formData,
      rules: [],
      formData: {}
    };
  },
  watch: {
    value(v) {
      this.formData = v;
    }
  },
  created() {
    this.formData = this.value;
  },
  methods: {
    rule(item) {
      return item.isCheck ? this.rules[item.prop] : [{ required: item.required, message: item.name + '不能为空', trigger: ['blur', 'change'] }];
    },
    sub() {
      this.$refs['formData'].validate(valid => {
        if (valid) {
          this.$emit('sub', this.formData);
        }
      });
    },
    resetFields() {
      this.$refs['formData'].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-divider__text {
  background: none;
}
.more {
  margin-top: 2px;
}
</style>
